
<template>
  <el-select placeholder="请选择服务路由" :value="mval" @change="selectHandler" :disabled="disabled"
             :clearable="clearable" :multiple="multiple" :filterable="true" collapse-tags>
    <el-option v-for="item in list" :key="item.routId" :label="item.routName" :value="item.routId">
      <span style="float: left">{{ item.routName }}</span>
      <span style="margin-left: 20px;float: right; color: #8492a6; font-size: 13px">{{ item.routId }}</span>
    </el-option>
  </el-select>
</template>

<script>
    export default {
      name: "RouterSelect",
      model: {
        prop: 'mval',
        event: 'modelValue'
      },
      props: ['mval','multiple','disabled','clearable'],
      mounted: function() {
        this.api.post('/bucket-system/gateway/router/list', {})
          .then((data) => {
            this.list = data.data;
          });
      },
      data() {
        return {
          list: []
        }
      },
      methods: {
        selectHandler: function(val){
          this.$emit('modelValue', val)
        }
      }
    }
</script>
